<script setup lang="ts">
defineOptions({
  name: "Welcome"
});
import { ref, onMounted, type PropType, computed, watch, nextTick } from "vue";
import ReCol from "@/components/ReCol";
import { useDark, useECharts } from "@pureadmin/utils";
import { getDashboardOverview } from "@/api/zhaoyuan";

const source = ref(0);
const pageData = ref({
  organizationStats: {
    townCount: 32,
    villageCount: 32,
    partyOrgCount: 32,
    totalStaffCount: 1216
  },
  taskStats: {
    totalTasks: 0,
    completedTasks: 0,
    completionRate: 0.0,
    inProgressTasks: 0,
    pendingTasks: 0
  },
  taskCompletionTrend: []
});
source.value = 36000;

//折线图

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});

//
onMounted(async () => {
  let res = await getDashboardOverview();
  pageData.value = res;

  // await nextTick(); // 确保DOM更新完成后再执行
  setOptions({
    title: {
      text: " 任务完成率趋势图"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    xAxis: {
      type: "category",
      data: res.taskCompletionTrend.map((item: any) => item.month)
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "总任务数",
        data: res.taskCompletionTrend.map((item: any) => item.totalTasks),
        type: "line"
      },
      {
        name: "已完成数",
        data: res.taskCompletionTrend.map((item: any) => item.completedTasks),
        type: "line"
      },
      {
        name: "完成率",
        data: res.taskCompletionTrend.map((item: any) => item.completionRate),
        type: "line"
      }
    ]
  });
});
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>组织机构统计</span>
            </div>
          </template>
          <el-row :gutter="24">
            <re-col :value="6" :xs="24" :sm="24">
              <el-statistic
                title="乡镇数"
                :value="pageData.organizationStats.townCount"
              />
            </re-col>
            <re-col :value="6" :xs="24" :sm="24">
              <el-statistic
                title="村委会"
                :value="pageData.organizationStats.villageCount"
              />
            </re-col>
            <re-col :value="6" :xs="24" :sm="24">
              <el-statistic
                title="党组织"
                :value="pageData.organizationStats.partyOrgCount"
              />
            </re-col>
            <re-col :value="6" :xs="24" :sm="24">
              <el-statistic
                title="总人员编制"
                :value="pageData.organizationStats.totalStaffCount"
              />
            </re-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>任务完成情况</span>
            </div>
          </template>
          <div class="c-grid">
            <div class="c-grid-item">
              <el-statistic
                title="总任务"
                :value="pageData.taskStats.totalTasks"
              />
            </div>
            <div class="c-grid-item">
              <el-statistic
                title="已完成"
                :value="pageData.taskStats.completedTasks"
              />
            </div>
            <div class="c-grid-item">
              <el-statistic
                title="完工率"
                :value="pageData.taskStats.completionRate"
              />
            </div>
            <div class="c-grid-item">
              <el-statistic
                title="进行中"
                :value="pageData.taskStats.inProgressTasks"
              />
            </div>
            <div class="c-grid-item">
              <el-statistic
                title="待处理"
                :value="pageData.taskStats.pendingTasks"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 25px">
      <div ref="chartRef" style="width: 100%; height: 500px" />
    </el-card>
  </div>
</template>
<style scoped>
.el-col {
  text-align: center;
}
.c-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .c-grid-item {
    flex: 1;
  }
}
</style>
